<template>
    <div class="body jinli">
        <div class="split-block-title">
            您的账号还可以发布 <strong>2</strong> 条职位！
        </div>
        <div class="list_height plist-txt notarrow">
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light">*</span> 职位名称
            </div>
            <div class="describe">
                <input
                    type="text"
                    id="jobs_name"
                    placeholder="请输入职位名称"
                    value=""
                    class="font13"
                    v-model="subInfo.jobs_name"
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="imSelectParent">
            <div
                class="list_height plist-txt imitateSelect"
                @click="zhiweixingzhiKey = !zhiweixingzhiKey"
            >
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light">*</span> 职位性质
                </div>
                <div class="describe font13">
                    <span class="selectTxt">{{
                        subInfo.nature_cn ? subInfo.nature_cn : '请选择职位性质'
                    }}</span>
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
        </div>
        <van-action-sheet
            v-model="zhiweixingzhiKey"
            :actions="zhiweixingzhictions"
            @select="zhiweixingzhiSelect"
            :duration="0.2"
        />
        <div
            class="list_height plist-txt qs-relative js-actionParent"
            @click="hangyeKey = !hangyeKey"
        >
            <div class="abAct js-showActionSheet"></div>
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light">*</span> 职位类别
            </div>
            <div class="describe font13 qs-temp">
                <span class="qs-temp-txt-jobs">{{
                    subInfo.category_cn ? subInfo.category_cn : '请选择职位类别'
                }}</span>
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="list_height plist-txt qs-relative" @click="openProps(0)">
            <div class="abAct J_describe"></div>
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light">*</span> 职位描述
            </div>
            <a class="describe font13 describeText">
                {{ subInfo.contents ? subInfo.contents : '请输入职位描述' }}
            </a>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="list_height plist-txt qs-relative" @click="openProps(1)">
            <div class="abAct J_wage"></div>
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light">*</span> 薪资待遇
            </div>
            <a class="describe font13">
                <span
                    class="J_wage_txt"
                    v-show="subInfo.minwage != 0 && subInfo.minwage != ''"
                >
                    {{ subInfo.minwage }} - {{ subInfo.maxwage }}
                </span>
                <span class="J_wage_txt" v-show="subInfo.minwage === ''">
                    请选择薪资待遇
                </span>
                <span class="J_wage_txt" v-show="subInfo.minwage === 0">
                    面谈
                </span>
            </a>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div
            class="list_height plist-txt qs-relative js-actionParent"
            @click="addressKey = !addressKey"
        >
            <div class="abAct js-showActionSheet"></div>
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light">*</span> 工作地区
            </div>
            <div class="describe font13 qs-temp-new-city">
                <span class="qs-temp-txt-city">{{
                    subInfo.district_cn ? subInfo.district_cn : '请选择地区'
                }}</span>
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div
            class="list_height plist-txt qs-relative last"
            @click="openProps(2)"
        >
            <div class="abAct J_tag"></div>
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light wh">*</span> 职位亮点
            </div>
            <a class="describe font13"
                ><span class="J_tag_txt">{{
                    subInfo.tag_cn ? subInfo.tag_cn : '请选择职位亮点'
                }}</span></a
            >
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="split-block-10"></div>
        <div class="imSelectParent">
            <div
                class="list_height plist-txt imitateSelect"
                @click="xueliKey = !xueliKey"
            >
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light wh">*</span> 学历要求
                </div>
                <div class="describe font13">
                    <span class="selectTxt">{{
                        subInfo.education_cn
                            ? subInfo.education_cn
                            : '请选择学历要求'
                    }}</span>
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="imSelectParent">
            <div
                class="list_height plist-txt imitateSelect"
                @click="jingyanKey = !jingyanKey"
            >
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light wh">*</span> 经验要求
                </div>
                <div class="describe font13">
                    <span class="selectTxt">{{
                        subInfo.experience_cn
                            ? subInfo.experience_cn
                            : '请选择经验要求'
                    }}</span>
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="list_height plist-txt qs-relative" @click="openProps(3)">
            <div class="abAct J_age"></div>
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light wh">*</span> 年龄要求
            </div>
            <a class="describe font13">
                <span class="J_age_txt" v-if="subInfo.age.length > 1">
                    {{ subInfo.age[0] }}-{{ subInfo.age[1] }}
                </span>
                <span class="J_age_txt" v-if="subInfo.age.length < 2"
                    >请填写年龄要求</span
                >
            </a>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="list_height plist-txt notarrow">
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light wh">*</span> 招聘人数
            </div>
            <div class="describe">
                <input
                    type="text"
                    name="amount"
                    id="amount"
                    placeholder="请输入招聘人数"
                    value=""
                    class="font13"
                    v-model="subInfo.amount"
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="list_height plist-txt notarrow">
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light wh">*</span> 所属部门
            </div>
            <div class="describe">
                <input
                    type="text"
                    name="department"
                    id="department"
                    placeholder="请输入所属部门"
                    value=""
                    class="font13"
                    v-model="subInfo.department"
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="split-block-10"></div>
        <!--联系方式-->
        <div class="list_height plist-txt notarrow">
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light wh">*</span> 联系人
            </div>
            <div class="describe">
                <input
                    type="text"
                    id="contact"
                    placeholder="请输入联系人"
                    class="font13"
                    value=""
                    v-model="subInfo.contact.contact"
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="list_height plist-txt notarrow">
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light wh">*</span> 联系手机
            </div>
            <div class="describe">
                <input
                    type="text"
                    id="telephone"
                    placeholder="请输入联系手机"
                    class="font13"
                    v-model="subInfo.contact.telephone"
                    value=""
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="list_height plist-txt notarrow">
            <div class="abAct J_tel"></div>
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light wh">*</span> 企业固话
            </div>
            <div class="describe">
                <input
                    type="text"
                    placeholder="请输入联系固话"
                    class="font13"
                    value=""
                    v-model="subInfo.contact.landline_tel"
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="list_height plist-txt notarrow">
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light wh">*</span> 联系邮箱
            </div>
            <div class="describe">
                <input
                    type="text"
                    id="email"
                    placeholder="请输入联系邮箱"
                    class="font13"
                    value=""
                    v-model="subInfo.contact.email"
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="list_height plist-txt notarrow">
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light wh">*</span> 联系地址
            </div>
            <div class="describe font13">
                <input
                    type="text"
                    id="address"
                    value="西城区白纸坊东街2号经济日报社"
                    v-model="subInfo.contact.address"
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="j_newbutton">
            <div class="j_newbtn" @click="closejibenxinxi()">发布</div>
        </div>
        <!-- 地区选择 -->
        <van-popup
            v-model="addressKey"
            position="bottom"
            :style="{ height: '60%' }"
        >
            <Cascader
                v-if="addressKey"
                :jobs="Info.city"
                :title="'请选择地区'"
                :num="1"
                :leavl="3"
                @calcaCallback="calcaCallbacaddres"
            />
        </van-popup>
        <!-- 职位类别 -->
        <van-popup
            v-model="hangyeKey"
            position="bottom"
            :style="{ height: '60%' }"
        >
            <Cascader
                v-if="hangyeKey"
                :jobs="Info.jobs"
                :title="'请选择职业'"
                :num="1"
                :leavl="3"
                @calcaCallback="calcaCallbackHangye"
            />
        </van-popup>
        <!-- 职位描述 -->
        <Zhiweimiaoshu
            v-if="proprKey === 0"
            @closeProps="zhiweimiaoshuSelect"
            :contents="subInfo.contents"
        />
        <!-- 薪资待遇 -->
        <Xinzidaiyu
            v-if="proprKey === 1"
            @closeProps="xinzidaiyuSelect"
            :minwage="subInfo.minwage"
            :maxwage="subInfo.maxwage"
        />
        <!-- 职位亮点 -->
        <Zhiweiliangdian
            v-if="proprKey === 2"
            @closeProps="zhiweiliangdianSelect"
            :tag_cn="subInfo.tag_cn"
            :tag="subInfo.tag"
            :tag_arr="Info.tag_arr"
        />
        <!-- 学历 -->
        <van-action-sheet
            v-model="xueliKey"
            :actions="xueliactions"
            @select="xueliSelect"
            :duration="0.2"
        />
        <!-- 经验 -->
        <van-action-sheet
            v-model="jingyanKey"
            :actions="jingyanactions"
            @select="jingyanSelect"
            :duration="0.2"
        />
        <!-- 年龄要求 -->
        <Nianling
            v-if="proprKey === 3"
            @closeProps="nianlingSelect"
            :age="subInfo.age"
        />
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import Cascader from '../../components/Cascader';
import Zhiweimiaoshu from '../../components/company/Zhiweimiaoshu';
import Xinzidaiyu from '../../components/company/Xinzidaiyu';
import Zhiweiliangdian from '../../components/company/Zhiweiliangdian';
import Nianling from '../../components/company/Nianling';

import { Toast, Dialog } from 'vant';

export default {
    name: '',
    components: {
        Cascader,
        Zhiweimiaoshu,
        Xinzidaiyu,
        Zhiweiliangdian,
        Nianling,
    },
    data() {
        return {
            Info: {},
            proprKey: '',

            // 学历
            xueliKey: false,
            xueliactions: [],

            // 所在地区
            addressKey: false,

            // 职位性质
            zhiweixingzhiKey: false,
            zhiweixingzhictions: [],

            // 行业选择
            hangyeKey: false,

            // 经验
            jingyanKey: false,
            jingyanactions: [],

            subInfo: {
                jobs_name: '',
                nature: '',
                nature_cn: '',

                category: '',
                category_cn: '',

                contents: '',

                minwage: '',
                maxwage: '',

                district_cn: '',
                district: '',

                tag: '',
                tag_cn: '',

                education_cn: '',
                education: '',

                experience_cn: '',
                experience: '',

                age: [],

                amount: '',

                department: '',

                contact: {
                    contact: '',
                    telephone: '',
                    landline_tel: '',
                    email: '',
                    address: '',
                },
            },
        };
    },
    computed: {},
    mounted() {
        this.getJianliYindao();
    },
    methods: {
        // 发布职位
        closejibenxinxi() {
            let params = Object.assign({}, this.subInfo);
            // params.jobcategory = this.subInfo.category;
            params.contact = this.subInfo.contact.contact;
            params.telephone = this.subInfo.contact.telephone;
            params.landline_tel = this.subInfo.contact.landline_tel;
            params.email = this.subInfo.contact.email;
            params.address = this.subInfo.contact.address;

            if (!params.jobs_name) {
                return Toast({
                    message: '请输入职位名称',
                    duration: 2000,
                });
            }

            if (!params.nature_cn) {
                return Toast({
                    message: '请选择职位性质',
                    duration: 2000,
                });
            }

            if (!params.category_cn) {
                return Toast({
                    message: '请选择职位类别',
                    duration: 2000,
                });
            }

            if (!params.contents) {
                return Toast({
                    message: '请输入职位描述',
                    duration: 2000,
                });
            }

            if (!params.minwage || !params.maxwage) {
                return Toast({
                    message: '请输入薪资待遇',
                    duration: 2000,
                });
            }

            if (!params.district_cn) {
                return Toast({
                    message: '请选择工作地区',
                    duration: 2000,
                });
            }

            if (!params.tag_cn) {
                return Toast({
                    message: '请选择职位亮点',
                    duration: 2000,
                });
            }

            if (!params.education_cn) {
                return Toast({
                    message: '请选择学位要求',
                    duration: 2000,
                });
            }

            if (!params.experience_cn) {
                return Toast({
                    message: '请选择经验要求',
                    duration: 2000,
                });
            }

            if (params.age.length < 2) {
                return Toast({
                    message: '请输入年龄要求',
                    duration: 2000,
                });
            }

            if (!params.amount) {
                return Toast({
                    message: '请输入招聘人数',
                    duration: 2000,
                });
            }

            if (!params.department) {
                return Toast({
                    message: '请输入所属部门',
                    duration: 2000,
                });
            }

            // if (!params.contact) {
            //     return Toast({
            //         message: '请输入联系人',
            //         duration: 2000,
            //     });
            // }

            // if (!params.telephone) {
            //     return Toast({
            //         message: '请输入手机号码',
            //         duration: 2000,
            //     });
            // }

            // if (!params.landline_tel) {
            //     return Toast({
            //         message: '请输入企业电话',
            //         duration: 2000,
            //     });
            // }

            // if (!params.email) {
            //     return Toast({
            //         message: '请输入邮箱',
            //         duration: 2000,
            //     });
            // }

            // if (!params.address) {
            //     return Toast({
            //         message: '请输入详细地址',
            //         duration: 2000,
            //     });
            // }

            // console.log(JSON.parse(JSON.stringify(params)));

            axiosPost('/apis/company/jobs_add', params, (res) => {
                if (res.status != 1) {
                    if (res.data.company_info == 0) {
                        Dialog.confirm({
                            title: '',
                            message: res.msg + '前往企业信息编辑页面？',
                        })
                            .then(() => {
                                this.$router.push('/companyInfo');
                            })
                            .catch(() => {
                                // on cancel
                            });
                    } else {
                        Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    return;
                }

                Toast({
                    message: res.msg,
                    duration: 2000,
                });
                setTimeout(() => {
                    this.$router.go(-1);
                }, 1000);
            });
        },
        // 年龄回调
        nianlingSelect(data) {
            document.body.style.overflow = '';
            this.proprKey = '';
            this.subInfo.age = data.data;
        },
        // 经验选择回调
        jingyanSelect(item) {
            this.jingyanKey = false;
            this.subInfo.experience = item.id;
            this.subInfo.experience_cn = item.name;
        },
        // 学历选择回调
        xueliSelect(item) {
            this.xueliKey = false;
            this.subInfo.education = item.id;
            this.subInfo.education_cn = item.name;
        },
        // 职位亮点回调
        zhiweiliangdianSelect(data) {
            document.body.style.overflow = '';
            this.proprKey = '';
            this.subInfo.tag = data.data.tag;
            this.subInfo.tag_cn = data.data.tag_cn;
        },
        // 地址选择回调
        calcaCallbacaddres(data) {
            this.addressKey = false;
            this.subInfo.district_cn = data[0].name;
            this.subInfo.district = data[0].id;
        },
        // 薪资待遇回调
        xinzidaiyuSelect(data) {
            document.body.style.overflow = '';
            this.proprKey = '';
            this.subInfo.minwage = data.data.minwage;
            this.subInfo.maxwage = data.data.maxwage;
        },
        // 职业描述回调
        zhiweimiaoshuSelect(data) {
            document.body.style.overflow = '';
            this.proprKey = '';
            this.subInfo.contents = data.data;
        },
        // 行业类别选择回调
        calcaCallbackHangye(data) {
            let a = '';
            for (let i in this.Info.jobs) {
                for (let k in this.Info.jobs[i]) {
                    if (data[0].id === k) {
                        a = i;
                    }
                }
            }
            let b = '';
            for (let i in this.Info.jobs) {
                for (let k in this.Info.jobs[i]) {
                    if (k === a) {
                        b = i;
                    }
                }
            }
            this.hangyeKey = false;
            this.subInfo.category_cn = data[0].name;
            this.subInfo.category = `${b},${a},${data[0].id}`;
        },
        // 职位性质回调
        zhiweixingzhiSelect(item) {
            this.zhiweixingzhiKey = false;
            this.subInfo.nature = item.id;
            this.subInfo.nature_cn = item.name;
        },

        // 数据加工
        computerData() {
            // 学历
            let education = [];
            for (let i in this.Info.education) {
                education.push({
                    name: this.Info.education[i],
                    id: i,
                });
            }
            this.xueliactions = education;

            // 职位性质数据加工
            let jobs_nature = [];
            for (let i in this.Info.jobs_nature) {
                jobs_nature.push({
                    name: this.Info.jobs_nature[i],
                    id: i,
                });
            }
            this.zhiweixingzhictions = jobs_nature;

            // 经验数据加工
            let experience = [];
            for (let i in this.Info.experience) {
                experience.push({
                    name: this.Info.experience[i],
                    id: i,
                });
            }
            this.jingyanactions = experience;
        },
        // 打开弹窗
        openProps(data) {
            document.body.style.overflow = 'hidden';
            this.proprKey = data;
        },

        // 获取职位引导
        getJianliYindao() {
            axiosPost(
                '/apis/company/jobs_add_create',
                {
                    jid: this.$route.query.id,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        if (res.data.company_info == 1) {
                            Dialog.confirm({
                                title: '',
                                message: res.msg + '前往企业信息编辑页面？',
                            })
                                .then(() => {
                                    this.$router.push('/companyInfo');
                                })
                                .catch(() => {
                                    // on cancel
                                });
                        } else {
                            return Toast({
                                message: res.msg,
                                duration: 2000,
                            });
                        }
                    }
                    this.Info = res.data;
                    this.proprKey = '';
                    this.computerData();
                    if (res.data.job_info) {
                        this.subInfo = res.data.job_info;
                    }
                }
            );
        },
    },
};
</script>
<style lang="less" src="../../assets/css/jobCommon.less" scope></style>
<style lang="css" src="../../assets/css/person_edit.css" scope></style>
<style lang="css" src="../../assets/css/van-action-sheet.css" scope></style>
<style lang="less" scope>
.split-block-title {
    width: 100%;
    padding: 0.5547rem 0.64rem 0.4267rem;
    line-height: 0.8533rem;
    background: transparent;
    font-size: 0.5486rem;
    color: #666666;
}
</style>
